<template>
  <div class="main-content">
    <el-row
      :gutter="24"
      type="flex"
      align="middle">
      <el-col :span="18">
        <china-map/>
      </el-col>
      <el-col
        :span="6"
        style="margin-left: -150px">
        <bar />
      </el-col>
    </el-row>
    <dv-decoration-10 style="width:100%;height:5px;margin:10px 0" />
    <el-row
      :gutter="24"
      type="flex"
      align="middle"
      style="height: 350px;">
      <el-col :span="12">
        <bottom-left/>
      </el-col>
      <el-col :span="6">
        <ring-block
          url="ovenModePro"
          title="功能分布"
          subtitle="泛微波"/>
      </el-col>
      <el-col
        :span="6"
        style="margin-left: -24px">
        <ring-block
          url="microwaveModePro"
          title=""
          subtitle="烤箱"/>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import topHeader from '@/views/modules/dataV/components/topHeader'
import appActive from '@/views/modules/data-show/components/app-active'
import totalDeviceInfo from '@/views/modules/data-show/components/total-device-info'
import bottomLeft from '@/views/modules/dataV/components/screen/bottomLeft.vue'
import bar from '@/views/modules/dataV/components/screen/bar.vue'
import chinaMap from '@/views/modules/dataV/components/screen/chinaMap.vue'
import ringBlock from '@/views/modules/dataV/components/screen/ring-block.vue'

export default {
  components:
  {
    topHeader,
    appActive,
    totalDeviceInfo,
    bottomLeft,
    bar,
    chinaMap,
    ringBlock
  },
  data () {
    return {
    }
  },
  created () {
  },
  methods: {
  }
}
</script>

<style lang="less" scoped>

  .main-content {
    flex: 1;
    display: flex;
    flex-direction: column;
  }

  .block-left-right-content {
    flex: 1;
    display: flex;
    margin-top: 20px;
  }

  .block-top-bottom-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    padding-left: 20px;
  }

  .block-top-content {
    height: 55%;
    display: flex;
    flex-grow: 0;
    box-sizing: border-box;
    padding-bottom: 20px;
  }

  .carousel-item{
    height: 800px;
    background-color: transparent;
  }

  .scroll-board{
    width: 210px;
    position: absolute;
    right: 12px;
    top:0;
  }
</style>
